$(function () {
    var temp = location.search.substring(1);
    var arr = temp.split('&');
    // 再把arr里面的数据以 = 分割
    var params = {}
    arr.forEach(el => {
        var result = el.split('=') //result[0] --> key
        console.log(result);
        params[result[0]] = result[1];
    })
    var id = params.id;

    // ------------------------http://localhost:3000/song/detail?ids=118261
    let songNameH = $(`.songNameH`);
    let sopng_ifn = $(`.sopng_ifn`);
    let mkb_img = $(`.mkb img`);
    let limit = 20;
    $.ajax({
        url: 'http://localhost:3000/song/detail',
        data: {
            ids: id,
        },
        success: function (res) {
            console.log(res);
            songNameH.html(``);
            sopng_ifn.html(``);
            let song = res.songs[0];
            if (song.mv !== 0) {
                songNameH.append(`<span class="f-ff2">${song.name}</span>
                <a title="播放mv" href="/mv?id=${song.mv}"><i class="icn u-icn u-icn-2"></i></a>`)
            } else {
                songNameH.html(`<span class="f-ff2">${song.name}</span>`)
            }
            mkb_img.attr('src', `${song.al.picUrl}`)
            sopng_ifn.append(`<p class="des s-fc4 geshou">歌手：</p><p class="des s-fc4">所属专辑：<a href="/album?id=${song.al.id}" class="s-fc7">${song.al.name}</a></p>`)
            let geshou = $('p.geshou');
            geshou.html('歌手：')
            song.ar.forEach((el, index) => {
                geshou.append(`<span class='NumS' data-nums="${index}" title="${el.name}"><a class="s-fc7" href="/artist?id=${el.id}">${el.name}</a></span>`)
            })
            let nums = document.querySelectorAll(`.NumS`);
            console.log(nums);
            nums.forEach((el, index) => {
                console.log(el.dataset.nums);
                if (el.dataset.nums == 0) {
                    el.classList.remove('NumS');
                }
            })
        }
    })


    // -----------------------
    let lyric_desc = $('.lyric_desc');
    $.ajax({
        url: "http://localhost:3000/lyric",
        data: {
            id: id,
        },
        success: function (res) {
            lyric_desc.html('');
            let lyricArr = res.lrc.lyric.split("\n")
            lyricArr.forEach(e => {
                let rindex = e.indexOf("]");
                e = e.substring(rindex + 1, )
                lyric_desc.append(`${e}<br>`);
            })


        }
    })
    // console.log(localStorage.getItem('token'));
    // 评论
    let txtarea = $('.comment_area textarea');
    txtarea.on('keydown', (e) => {
        if (e.code != "Backspace") {
            if ($(`#counter`).html() == 0) {
                txtarea.prop('maxlength', '140')
                alert('只能输140个字')
            }
            countChar("status", "counter")
        } else {
            countChar("status", "counter")
        }
    });
    txtarea.on('keyup', (e) => {
        if (e.code != "Backspace") {
            if ($(`#counter`).html() == 0) {
                txtarea.prop('maxlength', '140')
                alert('只能输140个字')
            }
            countChar("status", "counter")
        } else {
            countChar("status", "counter")
        }
    });

    let submitBtn = $('.user_comments_bottom a');
    submitBtn.on('click', function () {
        console.log(submitBtn);
    })

    function countChar(textareaName, spanName) {
        document.getElementById(spanName).innerHTML = 140 - document.getElementById(textareaName).value.length;

    }

    // 歌曲评论
    // 精彩评论
    let good_comments_wrap = $('.good_comments_wrap')
    $.ajax({
        url: 'http://localhost:3000/comment/music',
        data: {
            id: id,
            limit: limit,
        },
        success: function (res) {
            good_comments_wrap.html('<h3>精彩评论</h3>');
            res.hotComments.forEach((el, index) => {
                let time = el.time;

                function getTime(time) {
                    let date = new Date(time);
                    let nowDate = new Date();
                    let nowYear = nowDate.getFullYear();
                    let year = date.getFullYear();
                    let month = date.getMonth();
                    let day = date.getDate();
                    date = date.getTime();
                    let dYear = nowYear - year;
                    let hour = Math.floor((date / 1000 / 60 / 60) % 24) + 8;
                    let min = Math.floor((date / 1000 / 60) % 60);

                    function format(val) {
                        return val < 10 ? '0' + val : val
                    };
                    hour = format(hour);
                    min = format(min);
                    if (dYear > 0) {
                        date = `${year}年${month}月${day}日 ${hour}:${min}`
                        return date
                    } else {
                        date = `${month}月${day}日 ${hour}:${min}`
                        return date
                    }
                };
                time = getTime(el.time);
                if (el.beReplied.length == 0) {
                    good_comments_wrap.append(`<div id="${el.commentId}${el.time}" class="itm" data-id="${el.commentId}">
                    <div class="head"><a href="javascript:;"><img
                                src="${el.user.avatarUrl}"></a>
                    </div>
                    <div class="cntwrap">
                        <div class="">
                            <div class="cnt f-brk"><a href="javascript:;"
                                    class="s-fc7">${el.user.nickname}</a>：${el.content}</div>
                        </div>
                        <div class="rp">
                            <div class="time s-fc4">${time}</div>
                            <span class="dlt">
                                <span style="display: none;" class="j-delete-comment">
                                    <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                        data-type="delete">删除</a>
                                    <span class="sep">|</span>
                                </span></span>
                            <a data-id="15585584" class="likeNum" data-type="like"
                                href="javascript:void(0)">
                                <i class="zan u-icn2 u-icn2-12"></i> (${el.likedCount})</a>
                            <span class="sep">|</span>
                            <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                data-type="reply">回复</a>
                        </div>
                    </div>
                </div>`);

                } else {
                    good_comments_wrap.append(`<div id="${el.commentId}${el.time}" class="itm" data-id="${el.commentId}">
                    <div class="head"><a href="javascript:;"><img
                                src="${el.user.avatarUrl}"></a>
                    </div>
                    <div class="cntwrap">
                        <div class="">
                            <div class="cnt f-brk"><a href="javascript:;"
                                    class="s-fc7">${el.user.nickname}</a>：${el.content}</div>
                        </div>
                            <div class="que f-brk f-pr s-fc3">
                                <span class="darr">
                                    <i class="bd">◆</i>
                                    <i class="bg">◆</i>
                                </span>
                                <a class="s-fc7" href="/user/home?id=47514954">${el.beReplied[0].user.nickname}</a>：${el.beReplied[0].content}。
                            </div>
                            <div class="rp">
                                <div class="time s-fc4">${time}</div>
                                <span class="dlt">
                                    <span style="display: none;" class="j-delete-comment">
                                        <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                            data-type="delete">删除</a>
                                        <span class="sep">|</span>
                                    </span></span>
                                <a data-id="15585584" class="likeNum" data-type="like"
                                    href="javascript:void(0)">
                                    <i class="zan u-icn2 u-icn2-12"></i> (${el.likedCount})</a>
                                <span class="sep">|</span>
                                <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                    data-type="reply">回复</a>
                            </div>
                        </div>
                    </div>`);

                }
            })
        }
    })
    // 热门评论
    // 最新评论
    let songNum = $('.songNum');
    let pl_btn = $('.pl_btn span');
    let new_comments_wrap = $(`.new_comments_wrap`);
    $.ajax({
        url: 'http://localhost:3000/comment/music',
        data: {
            id: id,
        },
        success: function (res) {
            console.log(res);
            songNum.html(`共${res.total}条评论`);
            pl_btn.html(`(${res.total})`);
            new_comments_wrap.html(`<h3>最新评论(${res.total})</h3>`);
            res.comments.forEach(el => {
                let time = el.time;

                function getTime(time) {
                    let date = new Date(time);
                    let nowDate = new Date();
                    let nowYear = nowDate.getFullYear();
                    let year = date.getFullYear();
                    let month = date.getMonth();
                    let day = date.getDate();
                    date = date.getTime();
                    let dYear = nowYear - year;
                    let hour = Math.floor((date / 1000 / 60 / 60) % 24) + 8;
                    let min = Math.floor((date / 1000 / 60) % 60);

                    function format(val) {
                        return val < 10 ? '0' + val : val
                    };
                    hour = format(hour);
                    min = format(min);
                    if (dYear > 0) {
                        date = `${year}年${month}月${day}日 ${hour}:${min}`
                        return date
                    } else {
                        date = `${month}月${day}日 ${hour}:${min}`
                        return date
                    }
                };
                time = getTime(el.time);
                if (el.beReplied.length == 0) {
                    new_comments_wrap.append(`<div id="${el.commentId}${el.time}" class="itm" data-id="${el.commentId}">
                    <div class="head"><a href="javascript:;"><img
                                src="${el.user.avatarUrl}"></a>
                    </div>
                    <div class="cntwrap">
                        <div class="">
                            <div class="cnt f-brk"><a href="javascript:;"
                                    class="s-fc7">${el.user.nickname}</a>：${el.content}</div>
                        </div>
                        <div class="rp">
                            <div class="time s-fc4">${time}</div>
                            <span class="dlt">
                                <span style="display: none;" class="j-delete-comment">
                                    <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                        data-type="delete">删除</a>
                                    <span class="sep">|</span>
                                </span></span>
                            <a data-id="15585584" class="likeNum" data-type="like"
                                href="javascript:void(0)">
                                <i class="zan u-icn2 u-icn2-12"></i> (${el.likedCount})</a>
                            <span class="sep">|</span>
                            <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                data-type="reply">回复</a>
                        </div>
                    </div>
                </div>`)
                } else {
                    new_comments_wrap.append(`<div id="${el.commentId}${el.time}" class="itm" data-id="${el.commentId}">
                    <div class="head"><a href="javascript:;"><img
                                src="${el.user.avatarUrl}"></a>
                    </div>
                    <div class="cntwrap">
                        <div class="">
                            <div class="cnt f-brk"><a href="javascript:;"
                                    class="s-fc7">${el.user.nickname}</a>：${el.content}</div>
                        </div>
                            <div class="que f-brk f-pr s-fc3">
                                <span class="darr">
                                    <i class="bd">◆</i>
                                    <i class="bg">◆</i>
                                </span>
                                <a class="s-fc7" href="/user/home?id=47514954">${el.beReplied[0].user.nickname}</a>：${el.beReplied[0].content}。
                            </div>
                            <div class="rp">
                                <div class="time s-fc4">${time}</div>
                                <span class="dlt">
                                    <span style="display: none;" class="j-delete-comment">
                                        <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                            data-type="delete">删除</a>
                                        <span class="sep">|</span>
                                    </span></span>
                                <a data-id="15585584" class="likeNum" data-type="like"
                                    href="javascript:void(0)">
                                    <i class="zan u-icn2 u-icn2-12"></i> (${el.likedCount})</a>
                                <span class="sep">|</span>
                                <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                    data-type="reply">回复</a>
                            </div>
                        </div>
                    </div>`)
                }

            })

        }
    })

    

})